<template>
  <div>
    <keep-alive>
    <router-view />
    </keep-alive>
    <van-tabbar class="tab" v-model="active" route safe-area-inset-bottom fixed :border="false" >
      <van-tabbar-item replace to="/index">
        <span>{{$t("common.shouye")}}</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/market">
        <span>{{$t("common.hangqing")}}</span>
        <template #icon="props">
          <img :src="props.active ? icon.market1 : icon.market" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/aliContract">
        <span>{{$t("common.heyue")}}</span>
        <template #icon="props">
          <img :src="props.active ? icon.contract1 : icon.contract" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/capital">
        <span>{{$t("common.zijin")}}</span>
        <template #icon="props">
          <img :src="props.active ? icon.capital1 : icon.capital" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <van-number-keyboard safe-area-inset-bottom />
    <div class="bottomH"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      icon: {
        active: require("../assets/images/home1.png"),
        inactive: require("../assets/images/home.png"),
        market1: require("../assets/images/market1.png"),
        market: require("../assets/images/market.png"),
        contract1: require("../assets/images/contract1.png"),
        contract: require("../assets/images/contract.png"),
        capital1: require("../assets/images/capital1.png"),
        capital: require("../assets/images/capital.png"),
      },
    };
  },
};
</script>

<style scoped>
.tab {
  background-color: #090A1B;
  z-index: 1000;
  height: 60px;
}
.tab::after {
  border: 0 solid #090A1B;
}
.van-tabbar-item {
  color: #8992AE;
  background-color: #090A1B;
}
.van-tabbar-item--active {
  background-color: #090A1B;
  color: #0A7AFF;
}
img{
  margin-bottom: 4px;
}
.bottomH{
  height: calc(60px + constant(safe-area-inset-bottom));
  height: calc(60px + env(safe-area-inset-bottom));
}
</style>